<html>
    <head>
        <meta charset="UTF-8">
        <script src="./js/jquery-3.6.0.min.js" type="text/javascript"></script>
        <title>jQuery表格</title>
       <style>
           .td{font-size: 12px;padding: 5px;}
           .th{background-color: skyblue;font-weight: bold;
            text-align: left;}
            .even{background-color: white;}
            .odd{background-color: lightgrey;}
            tr:nth-child(1){background-color: yellow;}
            tr:nth-child(5){color: red;}
       </style>
    </head>
    <script type="text/javascript">
         $(document).ready(function (){
             $("tr:even").addClass("even");
             $("tr:odd").addClass("odd");
             $("tr:first").addClass("even");
             $("tr:first").addClass("th");
         });

    </script>
    
    <body>
        <table width="30%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#87CEEB">
            <tr>
                <td width="30%" height="30">商品名</td>
                <td width="30%" height="30">商品价格</td>
                <td width="30%" height="30">商品数量</td>
            </tr>
            <tr>
                <td height="30">美白滋养霜</td>
                <td>120</td>
                <td>100</td>
            </tr>
            <tr>
                <td height="30">美白润体乳</td>
                <td>80</td>
                <td>60</td>
            </tr>
            <tr>
                <td height="30">美白面膜</td>
                <td>68</td>
                <td>40</td>
            </tr>
            <tr>
                <td height="30">美白柔肤水</td>
                <td>100</td>
                <td>200</td>
            </tr>
            <tr>
                <td height="30">美白日霜</td>
                <td>60</td>
                <td>300</td>
            </tr>
            <tr>
                <td height="30">美白眼膜</td>
                <td>98</td>
                <td>100</td>
            </tr>
            <tr>
                <td height="30"></td>
                <td></td>
                <td>共计6件商品</td>
            </tr>
        </table>
    </body>
</html>
